<template>
  <div class="header_bar">
    <!-- 右 header -->
    <div class="header-left-box">
      <!-- 闪电 -->
      <img class="top-left-img" src="@/assets/images/c858bdc1-ac80-4b96-8779-78c8b7d619da.webp" alt="">
      <!-- 格子 -->
      <img class="center-left-img" src="@/assets/images/e8a0d78d-9acf-4771-b217-a51cb33d28cb.webp" alt="">
      <!-- 箭头 -->
      <img class="button-left-img" src="@/assets/images/r1t4zr3sm-1540276784935-HygtNzHhjm.png" alt="">
    </div>

    <!-- 标题 -->
    <h3 class="title-box">
      <span>|</span>
      退役军人培训管平台
      <span>|</span>
    </h3>
    <!-- 左 header -->
    <div class="header-right-box">
      <!-- 闪电 -->
      <img class="top-right-img" src="@/assets/images/c858bdc1-ac80-4b96-8779-78c8b7d619da.webp" alt="">
      <!-- 格子 -->
      <img class="center-right-img" src="@/assets/images/e8a0d78d-9acf-4771-b217-a51cb33d28cb.webp" alt="">
      <!-- 箭头 -->
      <img class="button-right-img" src="@/assets/images/r1t4zr3sm-1540276784935-HygtNzHhjm.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderBar',

};
</script>
<style lang="scss" scoped>
.header_bar {

  position: relative;
  height: 80px;
  overflow: hidden;

  // 左header
  .header-left-box {

    // 闪电
    .top-left-img {
      position: absolute;
      top: -78px;
      left: -2px;
      width: 500px;
      height: 188px;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      mix-blend-mode: normal;
      transform: rotateX(0deg) rotateY(180deg) scaleX(1) scaleY(1) translate(0px, 0px);
    }

    // 格子
    .center-left-img {
      position: absolute;
      top: 3px;
      left: 38px;
      width: 560px;
      height: 66px;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      mix-blend-mode: normal;
      transform: rotateX(0deg) rotateY(180deg) scaleX(1) scaleY(1) translate(0px, 0px);
    }

    // 箭头
    .button-left-img {
      position: absolute;
      top: 12px;
      left: 4px;
      width: 34px;
      height: 14px;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      mix-blend-mode: normal;
      transform: rotateX(0deg) rotateY(180deg) scaleX(1) scaleY(1) translate(0px, 0px);
    }
  }

  // 中间 标题
  .title-box {
    color: rgb(26, 255, 228);
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    width: 671px;
    font-family: 优设标题黑;
    font-style: italic;
    font-size: 28px;
    font-weight: 1000;
    text-align: center;
    letter-spacing: 6px;
    line-height: 52px;
    // text-shadow: rgb(26 255 228 / 40%) 0px 0px 12px;
    padding: 0px;

    span {
      font-style: initial;
    }
  }

  // 右haeader

  .header-right-box {

    // 闪电
    .top-right-img {
      position: absolute;
      top: -78px;
      right: -2px;
      width: 500px;
      height: 188px;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      mix-blend-mode: normal;
      transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1) translate(0px, 0px);
    }

    // 格子
    .center-right-img {
      position: absolute;
      top: 3px;
      right: 42px;
      width: 560px;
      height: 66px;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      mix-blend-mode: normal;
      transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1) translate(0px, 0px);
    }

    // 箭头
    .button-right-img {
      position: absolute;
      top: 12px;
      right: 4px;
      width: 34px;
      height: 14px;
      animation-duration: 5s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      mix-blend-mode: normal;
      transform: rotateX(0deg) rotateY(0deg) scaleX(1) scaleY(1) translate(0px, 0px);
    }
  }


}
</style>
